<template>
  <div class="dashboard">
    <div class="page-title">仪表盘</div>
    
    <!-- 统计卡片 -->
    <a-row :gutter="[16, 16]" class="mb-24">
      <a-col :xs="24" :sm="12" :md="6">
        <a-card class="stat-card">
          <a-statistic
            title="学生总数"
            :value="statistics.studentCount"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="12" :md="6">
        <a-card class="stat-card">
          <a-statistic
            title="教师总数"
            :value="statistics.teacherCount"
            :value-style="{ color: '#52c41a' }"
          >
            <template #prefix>
              <TeamOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="12" :md="6">
        <a-card class="stat-card">
          <a-statistic
            title="班级总数"
            :value="statistics.classCount"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <ApartmentOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="12" :md="6">
        <a-card class="stat-card">
          <a-statistic
            title="课程总数"
            :value="statistics.courseCount"
            :value-style="{ color: '#f5222d' }"
          >
            <template #prefix>
              <BookOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    
    <!-- 图表区域 -->
    <a-row :gutter="[16, 16]">
      <!-- 学生年级分布 -->
      <a-col :xs="24" :lg="12">
        <a-card title="学生年级分布" class="chart-card">
          <div class="chart-container">
            <div class="chart-placeholder">
              <BarChartOutlined class="chart-icon" />
              <p>年级分布图表</p>
              <div class="mock-chart">
                <div class="bar" style="height: 60%">一年级</div>
                <div class="bar" style="height: 80%">二年级</div>
                <div class="bar" style="height: 70%">三年级</div>
                <div class="bar" style="height: 90%">四年级</div>
                <div class="bar" style="height: 75%">五年级</div>
                <div class="bar" style="height: 85%">六年级</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      
      <!-- 成绩分布 -->
      <a-col :xs="24" :lg="12">
        <a-card title="成绩分布" class="chart-card">
          <div class="chart-container">
            <div class="chart-placeholder">
              <PieChartOutlined class="chart-icon" />
              <p>成绩分布图表</p>
              <div class="mock-pie">
                <div class="pie-item">
                  <span class="pie-color" style="background: #1890ff"></span>
                  优秀 (90-100): 25%
                </div>
                <div class="pie-item">
                  <span class="pie-color" style="background: #52c41a"></span>
                  良好 (80-89): 35%
                </div>
                <div class="pie-item">
                  <span class="pie-color" style="background: #faad14"></span>
                  中等 (70-79): 25%
                </div>
                <div class="pie-item">
                  <span class="pie-color" style="background: #f5222d"></span>
                  及格 (60-69): 15%
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    
    <!-- 最新动态 -->
    <a-row :gutter="[16, 16]" class="mt-24">
      <a-col :xs="24" :lg="12">
        <a-card title="最新通知" class="info-card">
          <a-list
            :data-source="notifications"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <a href="#">{{ item.title }}</a>
                  </template>
                  <template #description>
                    {{ item.description }}
                  </template>
                </a-list-item-meta>
                <div class="notification-time">{{ item.time }}</div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :lg="12">
        <a-card title="待办事项" class="info-card">
          <a-list
            :data-source="todos"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <span :class="{ 'todo-completed': item.completed }">
                      {{ item.title }}
                    </span>
                  </template>
                  <template #description>
                    <a-tag :color="item.priority === 'high' ? 'red' : item.priority === 'medium' ? 'orange' : 'blue'">
                      {{ item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低' }}优先级
                    </a-tag>
                  </template>
                </a-list-item-meta>
                <a-checkbox :checked="item.completed" @change="toggleTodo(item.id)" />
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
  UserOutlined,
  TeamOutlined,
  ApartmentOutlined,
  BookOutlined,
  BarChartOutlined,
  PieChartOutlined
} from '@ant-design/icons-vue'

// 统计数据
const statistics = reactive({
  studentCount: 1248,
  teacherCount: 86,
  classCount: 24,
  courseCount: 156
})

// 通知列表
const notifications = ref([
  {
    id: 1,
    title: '期末考试安排通知',
    description: '2024年春季学期期末考试将于下周开始，请各班级做好准备工作。',
    time: '2小时前'
  },
  {
    id: 2,
    title: '新学期教师培训',
    description: '为提高教学质量，将组织全体教师参加新学期培训活动。',
    time: '1天前'
  },
  {
    id: 3,
    title: '学生信息系统升级',
    description: '学生管理系统将于本周末进行升级维护，期间可能影响正常使用。',
    time: '2天前'
  },
  {
    id: 4,
    title: '家长会安排',
    description: '各年级家长会时间已确定，请班主任及时通知家长参加。',
    time: '3天前'
  }
])

// 待办事项
const todos = ref([
  {
    id: 1,
    title: '审核新生入学申请',
    priority: 'high',
    completed: false
  },
  {
    id: 2,
    title: '更新教师课程安排',
    priority: 'medium',
    completed: false
  },
  {
    id: 3,
    title: '整理学期成绩报告',
    priority: 'medium',
    completed: true
  },
  {
    id: 4,
    title: '准备家长会材料',
    priority: 'low',
    completed: false
  },
  {
    id: 5,
    title: '检查教室设备状态',
    priority: 'low',
    completed: false
  }
])

// 切换待办事项状态
const toggleTodo = (id) => {
  const todo = todos.value.find(item => item.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}

// 加载数据
const loadData = async () => {
  try {
    // 这里可以调用API获取真实数据
    // const data = await dashboardApi.getStatistics()
    // statistics.value = data
    
    console.log('仪表盘数据加载完成')
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow-color-light);
  border: 1px solid var(--border-color);
  background: var(--background-color);
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow-color-light);
  border: 1px solid var(--border-color);
  background: var(--background-color);
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: var(--text-color-secondary);
}

.chart-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--text-color-disabled);
}

.mock-chart {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 150px;
  margin-top: 20px;
}

.bar {
  width: 30px;
  background: linear-gradient(to top, var(--primary-color), #a8d0f0);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: end;
  justify-content: center;
  color: white;
  font-size: 12px;
  padding-bottom: 4px;
}

.mock-pie {
  margin-top: 20px;
  text-align: left;
}

.pie-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.pie-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow-color-light);
  border: 1px solid var(--border-color);
  background: var(--background-color);
}

.notification-time {
  color: var(--text-color-secondary);
  font-size: 12px;
}

.todo-completed {
  text-decoration: line-through;
  color: var(--text-color-disabled);
}

@media (max-width: 768px) {
  .chart-container {
    height: 250px;
  }
  
  .mock-chart {
    height: 120px;
  }
  
  .bar {
    width: 20px;
    font-size: 10px;
  }
}
</style>